<template>
  <div class="udpateall">

    <div class="form">
      <el-form ref="form" :model="form" label-width="120px" >
        <el-form-item label="问题"  style="width: 600px">
          <el-input type="textarea" v-model="form.problem" placeholder="请输入问题"></el-input>
        </el-form-item>
        <el-form-item label="上传问题图片">
          <el-upload
            class="upload-demo"
            ref="upload"
            action="https://jsonplaceholder.typicode.com/posts/"

            :on-remove="handleRemoveQuestion"
            :on-change="handleChangeQuestion"
            :file-list="form.questionUrlList"
            list-type="picture"
            :auto-upload="false">
            <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
            <!--            <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传到服务器</el-button>-->
            <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
          </el-upload>
        </el-form-item>

        <el-form-item label="答案" style="width: 600px">
          <el-input type="textarea" v-model="form.answer" placeholder="请输入答案"></el-input>
        </el-form-item>
        <el-form-item label="上传答案图片">
          <el-upload
            class="upload-demo"
            ref="upload"
            action="https://jsonplaceholder.typicode.com/posts/"

            :on-remove="handleRemoveAnswer"
            :on-change="handleChangeAnswer"
            :file-list="form.answerUrlList"
            list-type="picture"
            :auto-upload="false">
            <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
            <!--            <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传到服务器</el-button>-->
            <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
          </el-upload>
        </el-form-item>

        <el-form-item label="添加">
          <el-Button type="primary" @click="sumbit">添加</el-Button>
        </el-form-item>
      </el-form>
    </div>

  </div>
</template>

<script>
import myaxios from "../config/myaxios";

export default {
  name: "QuestionUpdatePage",
  data() {
    return {
      id: "",
      qid: 0,
      form: {
        problem: '',
        answer: '',
        questionUrlList: [],
        answerUrlList: []
      },
      questionList: [],
      answerlist: []
    }
  },
  mounted() {

    this.id = this.$route.params.id
    this.qid = this.$route.params.qid
    console.log(this.id)
    console.log(this.qid)
    if (this.qid != null && this.qid != "" && this.qid != 0) {
      this.getQuestion()
    }

  },
  methods: {
    getQuestion() {
      let urlSearchParams = new URLSearchParams();
      urlSearchParams.append("id", this.qid)
      myaxios.get("question/single", {params: urlSearchParams}).then(res => {
        if (res.data.code === 0) {
          this.form = res.data.data
          console.log(this.form)
          let questionfileList = this.form.questionUrlList;

          for (var i = 0; i < questionfileList.length; i++) {
            questionfileList[i] = {
              url: questionfileList[i]
            }
          }
          this.form.questionUrlList = questionfileList


          let answerUrlList = this.form.answerUrlList;
          for (var i = 0; i < answerUrlList.length; i++) {
            answerUrlList[i] = {
              url: answerUrlList[i]
            }
          }
          this.form.answerUrlList = answerUrlList
        } else {
          this.$message.error(res.data.message)
        }
      }).catch(err => {
        console.log(err)
        this.$message.error("系统繁忙，请重试")
      })
    },

    sumbit() {
      if (this.qid != null && this.qid != "" && this.qid != 0) {
        this.update()
      } else {
        this.add()
      }
    },

    update() {
      let formData = new FormData;
      formData.append("id", this.qid)
      formData.append("answer", this.form.answer)
      formData.append("problem", this.form.problem)
      formData.append("productid", this.id)
      for (var i = 0; i < this.answerlist.length; i++) {
        formData.append("answerList", this.answerlist[i])
      }

      for (var j = 0; j < this.questionList.length; j++) {
        formData.append("questionList", this.questionList[j])
      }
      myaxios.put("question", formData).then(res => {
        if (res.data.code === 0) {
          this.$message.success("添加成功")
          this.questionList = []
          this.answerlist = []
          this.form.questionUrlList = []
          this.form.answerUrlList = []
          this.form.answer = ""
          this.form.problem = ""
          this.$router.back()
        } else {
          this.$message.error(res.data.message)
        }
      }).catch(err => {
        this.$message.error("系统繁忙，请重试")
      })
    },
    add() {
      let formData = new FormData;
      formData.append("answer", this.form.answer)
      formData.append("problem", this.form.problem)
      formData.append("productid", this.id)
      for (var i = 0; i < this.answerlist.length; i++) {
        formData.append("answerList", this.answerlist[i])
      }

      for (var j = 0; j < this.questionList.length; j++) {
        formData.append("questionList", this.questionList[j])
      }
      myaxios.post("question", formData).then(res => {
        if (res.data.code === 0) {
          this.$message.success("添加成功")
          this.questionList = []
          this.answerlist = []
          this.form.answer = ""
          this.form.problem = ""
          this.$router.back()
        } else {
          this.$message.error(res.data.message)
        }
      }).catch(err => {
        this.$message.error("系统繁忙，请重试")
      })
    },
    handleChangeQuestion(file, fileList) {
      this.questionList.push(file.raw)
    },


    handleChangeAnswer(file, fileList) {
      this.answerlist.push(file.raw)
    },

    handleRemoveAnswer(file) {
      console.log(file)
      let urlSearchParams = new URLSearchParams();
      urlSearchParams.append("url", file.url)
      myaxios.post("/question/resource", urlSearchParams)

      this.answerlist = this.answerlist.filter((f) => file.name !== f.name)
    },
    handleRemoveQuestion(file) {
      console.log(file)
      let urlSearchParams = new URLSearchParams();
      urlSearchParams.append("url", file.url)
      myaxios.post("/question/resource", urlSearchParams)
      this.questionList = this.questionList.filter((f) => file.name !== f.name)
    }
  }
}
</script>

<style scoped>
.udpateall {
  width: 100%;
}

.form {
  width: 80%;
}
</style>
